import { View, Text, ScrollView, Image, TouchableOpacity, Alert } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Ionicons } from '@expo/vector-icons';
import { useLocalSearchParams, useRouter } from 'expo-router';
import { useState } from 'react';

export default function SubOrder() {
    const insets = useSafeAreaInsets();
    const router = useRouter();
    const params = useLocalSearchParams();
    const [quantity, setQuantity] = useState(1);
    const price = Number(params.price || 99);
    const size = params.size as string;
    const color = params.color as string;
    const title = params.title as string;

    const handleQuantityChange = (type: 'add' | 'minus') => {
        if (type === 'minus' && quantity > 1) {
            setQuantity(prev => prev - 1);
        } else if (type === 'add' && quantity < 99) {
            setQuantity(prev => prev + 1);
        }
    };

    return (
        <View className="flex-1 bg-gray-50" style={{ paddingTop: insets.top }}>
            {/* 顶部导航栏 */}
            <View className="bg-white">
                <View className="h-11 px-4 flex-row items-center justify-between">
                    <TouchableOpacity
                        onPress={() => router.back()}
                        className="w-8 h-8 items-center justify-center"
                    >
                        <Ionicons name="chevron-back" size={24} color="#333" />
                    </TouchableOpacity>
                    <Text className="text-base font-medium">确认订单</Text>
                    <View className="w-8" />
                </View>
            </View>

            <ScrollView className="flex-1" showsVerticalScrollIndicator={false}>
                {/* 收货地址 */}
                <TouchableOpacity
                    className="mx-4 mt-4 p-4 bg-white rounded-xl flex-row items-center"
                    activeOpacity={0.7}
                >
                    <Ionicons name="location-outline" size={24} color="#666" />
                    <View className="flex-1 ml-3">
                        <View className="flex-row items-center">
                            <Text className="text-base font-medium">张三</Text>
                            <Text className="text-sm text-gray-500 ml-4">13800138000</Text>
                        </View>
                        <Text className="text-sm text-gray-500 mt-1">
                            广东省深圳市南山区科技园南区科苑路科兴科学园
                        </Text>
                    </View>
                    <Ionicons name="chevron-forward" size={20} color="#999" />
                </TouchableOpacity>

                {/* 商品信息 */}
                <View className="mx-4 mt-4 p-4 bg-white rounded-xl">
                    <View className="flex-row">
                        <Image
                            source={require('../../assets/product/s1.png')}
                            className="w-24 h-24 rounded-lg"
                            resizeMode="cover"
                        />
                        <View className="flex-1 ml-3">
                            <Text className="text-base text-gray-900" numberOfLines={2}>
                                {title}
                            </Text>
                            <Text className="text-sm text-gray-500 mt-1">
                                {size}/{color}
                            </Text>
                            <View className="flex-row items-center justify-between mt-2">
                                <Text className="text-base font-bold text-red-500">¥{price}</Text>
                                <View className="flex-row items-center">
                                    <TouchableOpacity
                                        className="w-7 h-7 items-center justify-center border border-gray-200 rounded-l"
                                        onPress={() => handleQuantityChange('minus')}
                                    >
                                        <Ionicons name="remove" size={20} color="#666" />
                                    </TouchableOpacity>
                                    <View className="w-10 h-7 items-center justify-center border-t border-b border-gray-200">
                                        <Text>{quantity}</Text>
                                    </View>
                                    <TouchableOpacity
                                        className="w-7 h-7 items-center justify-center border border-gray-200 rounded-r"
                                        onPress={() => handleQuantityChange('add')}
                                    >
                                        <Ionicons name="add" size={20} color="#666" />
                                    </TouchableOpacity>
                                </View>
                            </View>
                        </View>
                    </View>
                </View>

                {/* 配送方式 */}
                <View className="mx-4 mt-4 p-4 bg-white rounded-xl">
                    <View className="flex-row items-center justify-between">
                        <Text className="text-base text-gray-900">配送方式</Text>
                        <View className="flex-row items-center">
                            <Text className="text-sm text-gray-500">快递免邮</Text>
                            <Ionicons name="chevron-forward" size={20} color="#999" className="ml-1" />
                        </View>
                    </View>
                </View>

                {/* 订单金额 */}
                <View className="mx-4 mt-4 p-4 bg-white rounded-xl">
                    <View className="flex-row items-center justify-between mb-3">
                        <Text className="text-sm text-gray-500">商品金额</Text>
                        <Text className="text-sm text-gray-900">¥{price * quantity}</Text>
                    </View>
                    <View className="flex-row items-center justify-between mb-3">
                        <Text className="text-sm text-gray-500">运费</Text>
                        <Text className="text-sm text-gray-900">¥0.00</Text>
                    </View>
                    <View className="flex-row items-center justify-between pt-3 border-t border-gray-100">
                        <Text className="text-base font-medium">实付金额</Text>
                        <Text className="text-lg font-bold text-red-500">¥{price * quantity}</Text>
                    </View>
                </View>

                {/* 备注 */}
                <View className="mx-4 mt-4 p-4 bg-white rounded-xl mb-32">
                    <Text className="text-base text-gray-900 mb-2">备注</Text>
                    <Text className="text-sm text-gray-500">选填，请先和商家协商一致</Text>
                </View>
            </ScrollView>

            {/* 底部操作栏 */}
            <View className="absolute left-0 right-0 bottom-0 bg-white border-t border-gray-100">
                <View className="flex-row items-center justify-between px-4 h-16">
                    <View>
                        <Text className="text-sm text-gray-500">实付金额：</Text>
                        <Text className="text-lg font-bold text-red-500">¥{price * quantity}</Text>
                    </View>
                    <TouchableOpacity
                        className="w-32 h-11 bg-red-500 rounded-full items-center justify-center"
                        activeOpacity={0.7}
                        onPress={() => {
                            Alert.alert('提示', '订单提交成功！');
                            router.back();
                        }}
                    >
                        <Text className="text-white font-medium">提交订单</Text>
                    </TouchableOpacity>
                </View>
            </View>
        </View>
    );
} 